<!-- 电表详情 -->
<template>
  <div
    class="echart"
    id="buildingEcharts"
    :style="myChartStyle"
    ref="chartRef"
  ></div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "buildingEcharts",
  components: {},
  data() {
    return {
      xData: [
        { name: "学生公寓", value: 15 ,up:true},
        { name: "图书馆", value: 10, up: false },
        { name: "教学楼", value: 5, up: false },
        { name: "实验楼", value: 5, up: true },
        { name: "体育馆", value: 5, up: true },
      ].reverse(), // 按 value 降序排序, //横坐标
      yData: ["学生公寓", "图书馆", "教学楼", "实验楼", "体育馆"].reverse(), //数据
      myChartStyle: {
        float: "left",
        width: "100%",
        height: "144px",
        marginTop: "10px",
      }, //图表样式
    };
  },
  computed: {},
  created() {},
  watch: {},
  mounted() {
    this.initEcharts();
  },
  updated() {
    this.checkChartRef();
  },
  methods: {
    checkChartRef() {
      const chartRef = this.$refs.chartRef;
      if (chartRef) {
        console.log("chartRef has value:", chartRef);
        // 进行相关操作
      } else {
        console.log("chartRef is null");
      }
    },
    initEcharts() {
      // 基本柱状图
      const option = {
        grid: {
          left: "120px",
          right: "100px",
          bottom: "-5px",
          top: "-10px",
        },
        xAxis: {
          type: "value",
          data: this.xData,
          splitLine: {
            show: false,
          }
        },
        yAxis: [
          {
            data: this.yData,
            type: "category",
            axisLabel: {
              show: true, // 显示标签
              color: "rgba(255,255,255,0.8)",
              textAlign: "left", // 标签居中
              // fontSize: 15, // 标签字体大小
              display:"flex",
              justyContent: 'center',
              aliginItems: 'center',
              // fontWeight: 'bold', // 标签字体加粗
              // padding: [0, 0, 0, 0], // 标签内边距
              // backgroundColor: 'rgba(255,255,255,0.8)', // 标签背景色

              margin: 20, // 设置标签离轴线的距离
              alignTo: "edge", // 左对齐（相对于 y 轴标签区域）
              rich: {
                num1: { // 第1名样式
                  // backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  //   { offset: 0, color: '#e9a11a' },
                  //   { offset: 1, color: '#a42ab8' }
                  // ]),
                  backgroundColor: '#c33bb7', // 橙色
                  color: "#fff",
                  borderRadius: 10,
                  fontWeight: 'bold',
                  fontSize: 14,
                  // width: 15,
                  marginbottom: 20,
                  // height:15,
                  // justyContent: 'center',
                  // aliginItems: 'center',
                  
                },
                num2: { // 第2名样式
                  backgroundColor: '#fe9639', // 橙色
                  color: "#fff",
                  borderRadius: 10,
                  display: "inline-block",
                  fontWeight: 'bold',
                  fontSize: 14,
                  // width: "20px",
                  // height: "20px",
                },
                num3: { // 第3名样式
                  backgroundColor: '#0748d6', // 铜色
                  fontWeight: 'bold',
                  borderRadius: 10,
                  fontSize: 14,
                  color:"#fff",
                  textAlign: 'left',
                  // width: "20px",
                  // height: "20px",
                },
                numOther: { // 其他名次样式
                  color: 'rgba(255,255,255,0.8)', // 默认青色
                  fontWeight: 'bold',
                  fontSize: 14,
                },
                text: {
                  color: 'rgba(255,255,255,0.8)' // 文本保持原色
                }
              },
              formatter: (value, index) => {
                const total = this.yData.length; // 获取总数
                const reversedIndex = total - index - 1;
              // 使用 Unicode 编码生成带圈数字（支持 0~20）
              const circledNumbers = [
                '\u24EA', '\u2460', '\u2461', '\u2462', '\u2463',
                '\u2464', '\u2465', '\u2466', '\u2467', '\u2468',
                '\u2469', '\u246A', '\u246B', '\u246C', '\u246D',
                '\u246E', '\u246F', '\u2470', '\u2471', '\u2472',
                '\u2473'
              ];
                // 动态选择样式类
                const rank = reversedIndex + 1;
                const numClass =
                  rank === 1 ? 'num1' :
                    rank === 2 ? 'num2' :
                      rank === 3 ? 'num3' : 'numOther';
                const num = reversedIndex < circledNumbers.length ? circledNumbers[reversedIndex + 1] : `(${reversedIndex + 1})`;
                return `{${numClass}|${num}} {text|${value}}`;
            }
            },
            axisTick: {
              show: false, // 隐藏 y 轴刻度线
            },
            axisLine: {
              show: false, // 隐藏 y 轴的轴线
            },
            splitLine: {
              show: false,
            },
          },
          {
            type: "category",
            data: this.xData,
            position: "right", // 设置在右侧
            axisLabel: {
              show: true,
              color: "rgba(255,255,255,0.8)",
              margin: 20, // 设置标签离轴线的距离
              aligin: "right",
              formatter: (value, index) => {
                // console.log("555555555", value, index);
                return handleGetArrow(value, index,this.xData)
                // 添加向上/向下箭头
                function handleGetArrow(value, index, xData) {
                  if (index <  (xData.length - 3)){
                    return `${value}% ${xData?.[index].up === true ? '{whiteDownUp|⬆}' : '{whiteDownUp|⬇}'}`;
                  }
                  return `${value}% ${xData?.[index].up === true ? '{arrowUp|⬆}' : '{arrowDown|⬇}'}`;
                }
              },
              rich: {
                // ...原有样式
                arrowUp: {
                  color: '#08c2c0', // 绿色表示上升
                  fontSize: 14,
                  padding: [0, 3, 0, 0]
                },
                arrowDown: {
                  color: '#f5222d', // 红色表示下降
                  fontSize: 14,
                  padding: [0, 3, 0, 0]
                },
                whiteDownUp: {
                  color: '#FFF', // 红色表示下降
                  fontSize: 14,
                  padding: [0, 3, 0, 0]
                }
              }
            },
            axisTick: {
              show: false, // 隐藏 y 轴刻度线
            },
            axisLine: {
              show: false, // 隐藏 y 轴的轴线
            },
            splitLine: {
              show: false,
            },
          },
        ],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
          formatter: function (params) {
            return params.map(item => {
              return `${item.marker} ${item.name}: <strong>${item.value}%</strong>`;
            }).join('<br>');
          }
        },
        dataZoom: [
          {
            type: "inside", // 内置型缩放
            start: 0, // 初始缩放范围起点（百分比）
            end: 100, // 初始缩放范围终点（百分比）
          },
        ],
        series: [
          {
            name: "建筑能耗排名",
            type: "bar", //形状为柱状图
            data: this.xData,
            showBackground: true, // 开启背景区域
            backgroundStyle: {
              color: "#051e5e", // 设置背景颜色（浅绿色半透明为例）
              borderRadius: [0, 10, 10, 0],
            },
            itemStyle: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: "#0e8afa" }, // 起始颜色（浅蓝色）
                { offset: 1, color: "#00bdfe" }, // 结束颜色（深蓝色）
              ]),
              borderRadius: [0, 10, 10, 0],
            },
            yAxisIndex: 0, // 使用左侧 y 轴（index 从 0 开始）
            barWidth: 10,
            label: {
              show: false,
              // position: "right",
              // formatter: "{c}%", // 显示百分比
            },
          },
          // {
          //   name: "右侧柱状图",
          //   type: "bar", // 或 bar
          //   data: this.xData,
          //   yAxisIndex: 1, // 使用右侧 y 轴
          //   zIndex: 0,
          // },
        ],
      };
      // const chartRef = this.$refs.chartRef;
      // let myChart;
      // if (chartRef) {
      //   // 获取 div 的高度
      //   const divHeight = chartRef.offsetHeight;
      //   const width = chartRef.offsetWidth;
      //   console.log("chartRef", divHeight);
      //   const myChart = echarts.init(document.getElementById("buildingEcharts"), {
      //     width: width,
      //     height: divHeight ? divHeight : "500px",
      //   })
      //   myChart.setOption(option);
      // }else{ 
      //   myChart = echarts.init(document.getElementById("buildingEcharts"));
      // }
      const myChart = echarts.init(document.getElementById("buildingEcharts"));
     
      myChart.setOption(option);
      //随着屏幕大小调节图表
      window.addEventListener("resize", () => {
        myChart.resize();
      });
    },
  },
};
</script>

<style scoped></style>
